<template>
  <div class="yingmoo-ymmemberdefault">
    <div class="page">
      <div class="member-center">
        <p>会员中心</p>
        <ul>
          <router-link tag="li" to="">个人资料</router-link>
          <!--<router-link tag="li" to="/yminformation">消息中心</router-link>-->
          <li @click="li2=1,li3=0,li4=0,li6=0">
            订单中心
            <div class="li2" v-show="li2==1">
              <router-link tag="p" to="/ymmemberorder"><p class="small" @click="setsession(1),session=1">所有订单</p></router-link>
              <router-link tag="p" to="/ymmemberorder"><p class="small" @click="setsession(2),session=2">待确认</p></router-link>
              <router-link tag="p" to="/ymmemberorder"><p class="small" @click="setsession(3),session=3">执行中</p></router-link>
              <router-link tag="p" to="/ymmemberorder"><p class="small" @click="setsession(4),session=4">已完成</p></router-link>
              <router-link tag="p" to="/ymmemberorder"><p class="small" @click="setsession(5),session=5">已取消</p></router-link>
            </div>
          </li>
          <li @click="li3=1,li2=0,li4=0,li6=0" v-if="user.shop != 0">
            店铺管理
            <div class="li3" v-show="li3==1">
              <router-link tag="p" to="/ymMembershop" class="small">媒体管理</router-link>
              <router-link tag="p" to="/ymMemberstorecomboaddsubmit" class="small">套餐管理</router-link>
              <router-link tag="p" to="/ymMembermysubmitactivity" class="small">我的活动</router-link>
              <router-link tag="p" to="/ymMembersubmitmycase" class="small">我的案例</router-link>
            </div>
          </li>
          <li @click="li4=1,li3=0,li2=0,li6=0">
            需求中心
            <div class="li4" v-show="li4==1">
              <router-link tag="p" to="/ymMemberneedlist" class="small">投放单</router-link>
              <router-link tag="p" to="/ymMemberneedlist" class="small">询价单</router-link>
            </div>
          </li>
          <li @click="li6=1,li4=0,li3=0,li2=0">
            关注中心
            <div class="li6" v-show="li6==1">
              <router-link tag="p" to="/ymattentionmedia" class="small">关注的媒体</router-link>
<!--
              <router-link tag="p" to="/ymattentionstore" class="small">关注的店铺</router-link>
              <router-link tag="p" to="/ymattentionactivity" class="small">关注的活动</router-link>
-->
            </div>
          </li>
          <router-link tag="li" to="/ymMembererror">我的检错</router-link>
          <!--<router-link tag="li" to="">我的监测</router-link>
          <router-link tag="li" to="">我的积分</router-link>-->
        </ul>
      </div>
      <div class="member-right">
        <h4>欢迎您，来到会员中心！</h4>
        <div class="user">
          <div class="header-portrait">
            <img width="226px" height="226px"  :src="logo" />
          </div>
          <div class="text">
            <p>会员名称：<span>{{user.contentUser}}</span></p>
            <p>会员等级：<span>{{level.contentName}}</span></p>
            <p v-if="user.loginTime != null">最后登录时间：<span>{{user.loginTime}}</span></p>
          </div>
          <div class="operation">
            <p>您的资源权限是：</p>
            <div class="btn_default">
              <div id="adver" class="">广告主</div>
              <div id="media" class="">媒体主</div>
            </div>
            <div class="float" v-if="user.shop == 0" @click="apply"><p>申请权限</p></div>
          </div>
        </div>
        <div class="list">
          <img src="../assets/ym-member/note-book.png" class="note-book" />
          <div class="list-note">
            <img :src="mediaSource.img" />
            <p>{{mediaSource.name}}<span>{{mediaSource.num}}</span></p>
          </div>
          <div class="list-note">
            <img :src="orders.img" />
            <p>{{orders.name}}<span>{{orders.num}}</span></p>
          </div>
          <div class="list-note">
            <img :src="requires.img" />
            <p>{{requires.name}}<span>{{requires.num}}</span></p>
          </div>
          <div class="list-note">
            <img :src="checkError.img" />
            <p>{{checkError.name}}<span>{{checkError.num}}</span></p>
          </div>
          <div class="list-note">
            <img :src="monitor.img" />
            <p>{{monitor.name}}<span>{{monitor.num}}</span></p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "yingmoo-ymmemberdefault",
    data() {
      return {
        requestAddr: this.GLOBAL.addr,
        shos: 0,
        li2: 0,
        li3: 0,
        li4: 0,
        li6: 0,
        mediaSource: {
          img: require('@/assets/ym-member/note-book2.png'),
          name: '媒体资源',
          num: ''
        },
        orders: {
          img: require('@/assets/ym-member/note-book3.png'),
          name: '订单',
          num: ''
        },
        requires: {
          img: require('@/assets/ym-member/note-book4.png'),
          name: '需求',
          num: '0'
        },
        checkError: {
          img: require('@/assets/ym-member/note-book5.png'),
          name: '检错',
          num: '0'
        },
        monitor: {
          img: require('@/assets/ym-member/note-book1.png'),
          name: '监测',
          num: '0'
        },
        user: {},
        level: {},
        logo: ''
      }
    },
    mounted() {
      this.getUser();
      this.change();
    },
    methods: {
      apply: function() {
        window.location.href = "../#/ymMemberapplyforverify"
      },
      change: function() {
        if (this.user.shop == 0) {
          document.getElementById("adver").setAttribute("class", "rent");
          document.getElementById("media").setAttribute("class", "let");
        } else {
          document.getElementById("adver").setAttribute("class", "let");
          document.getElementById("media").setAttribute("class", "rent");
        }
      },
      getMyMediaData: function() {
        this.$http.post(this.requestAddr + "/Login/myMediaData", {
          "memberId": this.user.autoId
        }, {
          emulateJSON: true,
          withCredentials: true
        }).then(
          (res) => {
            this.mediaSource.num = res.data.mediaSum;
            this.orders.num = res.data.orderSum;
            this.requires.num = res.data.requirSum;
          },
          (error) => {
            console.log(error);
          }
        );
      },
      getUser: function() {
        var data = localStorage.getItem("user");
        if (data != null) {
          this.user = JSON.parse(localStorage.getItem("user"));
          this.level = JSON.parse(localStorage.getItem("level"));
          this.flag = true;
          this.getMyMediaData();
          this.getMemberCorpInfo();
        } else {
          this.flag = false;
        }
      },
      confirmExit: function() {
        if (confirm("您确认要退出吗？")) {
          localStorage.clear();
          this.user = {};
          this.flag = false;
        }
      },
      getMemberCorpInfo: function() {
        this.$http.post(this.requestAddr + "/GetJson/getMemberCorpInfo", {
          "memberId": this.user.autoId
        }, {
          emulateJSON: true
        }).then(
          (res) => {
            this.logo = (res.data.memberCorp).contentLogo;
          }
        );
      },
      setsession: function(odd) {
        window.sessionStorage.setItem('odd', odd)
      }
    }
  }

</script>

<style scoped lang="less">
  .yingmoo-ymmemberdefault {

    .page {
      width: 1200px;
      margin: 0 auto;
      margin-top: 20px;
      display: flex;
      justify-content: space-between;
      .member-center {
        width: 216px;
        height: 710px;
        background-color: white;
        p {
          height: 46px;
          color: white;
          text-align: center;
          background-color: #036eb7;
          font-size: 16px;
          font-weight: bold;
          line-height: 46px;
        }
        ul {
          li {
            padding-left: 68px;
            line-height: 42px;
            cursor: pointer;
            &:nth-child(1) {
              margin-top: 20px;
              background-image: url(../assets/ym-member/icon-1.png);
              background-repeat: no-repeat;
              background-position: 40px 11px;
              &:hover {
                background-image: url(../assets/ym-member/icon-1-hover.png);
                background-repeat: no-repeat;
                background-position: 40px 11px;
                color: #f29600;
              }
            }
            /*
            &:nth-child(2) {
              background-image: url(../assets/ym-member/icon-2.png);
              background-repeat: no-repeat;
              background-position: 40px 11px;
              &:hover {
                background-image: url(../assets/ym-member/icon-2-hove.png);
                background-repeat: no-repeat;
                background-position: 40px 11px;
                color: #f29600;
              }
            }
*/
            &:nth-child(2) {
              background-image: url(../assets/ym-member/icon1.png);
              background-repeat: no-repeat;
              background-position: 40px 11px;
              &:hover {
                background-image: url(../assets/ym-member/icon1-hover.png);
                background-repeat: no-repeat;
                background-position: 40px 11px;
                color: #f29600;
              }
            }
            &:nth-child(3) {
              background-image: url(../assets/ym-member/icon2.png);
              background-repeat: no-repeat;
              background-position: 40px 11px;
              &:hover {
                background-image: url(../assets/ym-member/icon2-hover.png);
                background-repeat: no-repeat;
                background-position: 40px 11px;
                color: #f29600;
              }
            }
            &:nth-child(4) {
              background-image: url(../assets/ym-member/icon3.png);
              background-repeat: no-repeat;
              background-position: 40px 11px;
              &:hover {
                background-image: url(../assets/ym-member/icon3-hover.png);
                background-repeat: no-repeat;
                background-position: 40px 11px;
                color: #f29600;
              }
            }
            &:nth-child(5) {
              background-image: url(../assets/ym-member/icon4.png);
              background-repeat: no-repeat;
              background-position: 40px 11px;
              &:hover {
                background-image: url(../assets/ym-member/icon4-hover.png);
                background-repeat: no-repeat;
                background-position: 40px 11px;
                color: #f29600;
              }
            }
            &:nth-child(6) {
              background-image: url(../assets/ym-member/icon-6.png);
              background-repeat: no-repeat;
              background-position: 40px 11px;
              &:hover {
                background-image: url(../assets/ym-member/icon-6-hove.png);
                background-repeat: no-repeat;
                background-position: 40px 11px;
                color: #f29600;
              }
            }
            /*
            &:nth-child(7) {
              background-image: url(../assets/ym-member/icon-7.png);
              background-repeat: no-repeat;
              background-position: 40px 11px;
              &:hover {
                background-image: url(../assets/ym-member/icon-7-hove.png);
                background-repeat: no-repeat;
                background-position: 40px 11px;
                color: #f29600;
              }
            }
            &:nth-child(8) {
              background-image: url(../assets/ym-member/icon-8.png);
              background-repeat: no-repeat;
              background-position: 40px 11px;
              &:hover {
                background-image: url(../assets/ym-member/icon-8-hove.png);
                background-repeat: no-repeat;
                background-position: 40px 11px;
                color: #f29600;
              }
            }
*/
            
            &:nth-child(7) {
              &:hover {
                color: #f29600;
              }
            }
            &:nth-child(8) {
              &:hover {
                color: #f29600;
              }
            }
            &:nth-child(9) {
              &:hover {
                color: #f29600;
              }
            }
          }
          div {
            .small {
              font-size: 15px;
              color: #666666;
              font-weight: 100;
              background-color: white;
              text-align: left;
              &:hover {
                color: #f29600;
              }
            }
          }
        }
      }
      .member-right {
        width: 964px;
        height: 710px;
        background-color: white;
        h4 {
          font-size: 18px;
          color: #333333;
          margin-left: 30px;
          margin-top: 30px;
          font-weight: bold;
        }
        .user {
          width: 100&;
          height: 250px;
          display: flex;
          justify-content: space-between;
          .header-portrait {
            width: 222px;
            height: 222px;
            border-radius: 111px;
            border: 2px solid #f29600;
            overflow: hidden;
            margin-left: 30px;
            margin-top: 30px;
            margin-bottom: 30px;
          }
          .text {
            margin-top: 80px;
            p {
              font-weight: bold;
              color: #333333;
              font-size: 16px;
              line-height: 50px;
              span {
                font-weight: 100;
                color: #999999;
              }
            }
          }
          .operation {
            margin-top: 80px;
            margin-right: 100px;
            p {
              font-weight: bold;
              color: #333333;
              font-size: 16px;
              line-height: 50px;
            }
            .btn_default {
              width: 280px;
              display: flex;
              justify-content: space-between;
              margin-top: 15px;
              div {
                width: 129px;
                height: 38px;
                border-radius: 10px;
                text-align: center;
                line-height: 38px;
              }
              .rent {
                color: white;
                background-color: #036eb7;
              }
              .let {
                color: #666666;
                background-color: #cccccc;
              }
            }
            .float {
              width: 54px;
              height: 54px;
              background-color: #f29600;
              border-radius: 27px;
              position: relative;
              bottom: 82px;
              left: 270px;
              cursor: pointer;
              p {
                width: 38px;
                line-height: 18px;
                margin-left: 13px;
                padding-top: 9px;
                font-size: 14px;
                color: white;
                font-weight: 100;
              }
            }
          }
        }
        .list {
          margin-top: 30px;
          width: 100%;
          height: 142px;
          display: flex;
          background-color: #f2f2f2;
          .note-book {
            padding: 2px;
            padding-left: 30px;
          }
          .list-note {
            display: flex;
            align-items: center;
            padding-left: 31px;
            p {
              font-size: 16px;
              font-weight: bold;
              padding-left: 16px;
              color: #333333;
              span {
                color: #f29600;
                padding-left: 16px;
              }
            }
          }
        }
      }
    }
  }

</style>
